
import tpl from './index.html';

export default {
    // 加载模板文件
    template: tpl,
    // 接受外部数据
    propTypes: {
        // 1、常用
        // 组件唯一默认对外双向绑定的数据
        value: {
            type: 'numeric',
            value: ''
        },
        // 组件包裹层自定义行内样式
        style: {
            type: 'string',
            value: ''
        },
        // 2、更多
        options: {
            type: 'array',
            value: []
        }
    },
    // 内部数据
    data: function(){
        return {
            name: "组件名称",
            // 状态
            states: {

            },
            // 配置
            opts: {

            },
            valueName: '请选择',
            showOptions: false,
            clickout: function(){
                alert('clickout')
            }
        }
    },
    // 方法
    methods: {
        switchOptions: function(){
            var self = this;
            self.toggle('showOptions');
        },
        hideOptions: function(){
            this.set('showOptions', false);
        },
        choose: function(index){
            var self = this;
            var cur = self.get('options.' + index)
            self.set('value', cur.val);
            self.switchOptions();
        }
    },
    // 事件
    events: {
        submit:function(){
            layer.msg('默认submit');
            return false;
        }
    },
    // 内部过滤器
    filters: {
        
    },
    // 数据监听
    watchers: {
        "showOptions": {
            watcher: function(newValue){
                var self = this;
                if(newValue){
                    var winH = window.innerHeight;
                    var curH = self.$el.childNodes[1].offsetHeight;
                    var curTop = self.$el.offsetTop - window.scrollY;
                    if((winH - curTop) < curH){
                        self.set('isTop', true)
                    }else {
                        self.set('isTop', false)
                    }
                }
            },
            sync: true
        },
        "value": {
            watcher: function(newValue){
                var self = this;
                var list = self.get('options');
                for(var i=0; i<list.length; i++){
                    if(list[i].val == newValue){
                        self.set('valueName', list[i].name)
                    }
                }
            },
            sync: true
        }
    },
    afterMount: function(){
        var self = this;
        
    }
};